<template>
	<view class="content">
		<view class="header">
			<view class="reback" @click="exit">退出</view>
			<view class="midltitle">首页</view>
			<view class="reback"></view>
		</view>
		<u-toast ref="uToastc" />
		<view class="catainer">
			<up-modal :show="show" showCancelButton buttonReverse @confirm="confirm" @cancel='show=false'
				title="确认退出操作吗？"></up-modal>

			<view class="catainerTop">
				重点目标单位督查抄告平台
			</view>
			<view class="bannerInfo">
				<view class="contenArea">
					<view class="contenAreaList" @click="toggle('center')">
						<image src="../../static/images/p1.png" class="imagede"></image>
						<view class="contenAreaName">检查上报</view>
					</view>

					<view class="contenAreaList" @click="toInfo('task')">
						<image src="../../static/images/p4.png" class="imagede"></image>
						<view class="contenAreaName">任务中心</view>
					</view>
					<view class="contenAreaList" @click="toInfo('check')">
						<image src="../../static/images/p2.png" class="imagede"></image>
						<view class="contenAreaName">检查记录</view>
					</view>
					<view class="contenAreaList" @click="toInfo('target')">
						<image src="../../static/images/p5.png" class="imagede"></image>
						<view class="contenAreaName">目标单位</view>
					</view>

					<view class="contenAreaList" @click="toInfo('danger')">
						<image src="../../static/images/p3.png" class="imagede"></image>
						<view class="contenAreaName">隐患处置</view>
					</view>
					<view class="contenAreaList">
						<image src="../../static/images/p6.png" class="imagede" @click="toInfo('monit')"></image>
						<view class="contenAreaName">监测预警</view>
					</view>
				</view>
			</view>
			<view class="information">
				<view class="informationTitle" @click="ToInfomat">
					<view class="left">
						<image src="../../static/images/infoermation.png" class="leftImg"></image>
						消息通知
					</view>
					<image src="../../static/images/right.png" class="right"></image>
				</view>
				<view class="inforCatiner">
					<view v-if="infoMessagdata.length>0">
						<view class="infoList" v-for="(item,index) in infoMessagdata" :key="index">
							<view class="infoListitem">{{item.message.slice(0,10)}}....</view>
							<view class="time">
								{{item.createTime}}
							</view>
						</view>
					</view>
					<view class="empty" v-else>暂无数据</view>
				</view>
			</view>
			<!-- 数字看板 -->
			<FiguresInfoVue :homePageCounInfo="homePageCounInfo" />
			<!-- 普通弹窗 -->
			<!-- <Checkdetail :pageType="pageType" /> -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="midTitle">选择上报单位</view>
					<uni-easyinput class="top-input" trim="all" v-model="unitName" placeholder="请输入单位名称"
						:inputBorder="false">
						<template #right><text style="margin-right: 24rpx;">
								<uni-icons type="search" size="24" color='#a6a6a6' @click="getCheckInfo"></uni-icons>
							</text></template>
					</uni-easyinput>
					<view class="popupContentIfo">
						<view v-if="institutionListData.length>0">
							<view class="popupCheckList" v-for="(item,index) in institutionListData" :key="index">
								<view class="popupCheckItem" @click="upTo(item.institutionId)">
									<view class="popupCheckTitle">
										<view class="left">
											{{item.name}}
										</view>
										<image src="../../static/images/d2.png" class="checktt"></image>
									</view>
									<view class="middle">
										<image src="../../static/images/d1.png" class="checktt"
											style="margin-right: 8rpx;">
										</image>
										{{item.areaName}}
									</view>
									<view class="bottom">
										<view class="bottomItem">
											单位类型：<text class="bottomType">{{item.institutionType}}</text>
										</view>
										<!-- 		<view class="bottomItem">
										所属行业：<text class="bottomType">{{ item.industryName}}</text>
									</view> -->
									</view>
								</view>
							</view>
						</view>
						<u-empty v-else text="暂无数据" iconColor="#70a7fd" textColor="#85878B" mode="data"></u-empty>
					</view>
				</view>
			</uni-popup>
			<!-- 待办事项 -->
			<view class="todoInfo">
				<view class="todoInfoItem">
					<view class="informationTitle" @click="upToDanger">
						<view class="left">
							<image src="../../static/images/matters.png" class="leftImg"></image>
							待办事项
						</view>
						<image src="../../static/images/right.png" class="right"></image>
					</view>
					<view class=" cardTop">
						<up-tabs :list="list1" lineWidth="50" lineHeight="6" lineColor="#5095FD" :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }" :scrollable="false" @click="onClickItem" current=0></up-tabs>
						<!--  -->
						<view class="cardTab">
							<view v-if="checkdataList.length != 0">
								<view class="table-item" v-for="(item,index) in checkdataList" :key="index"
									@click="handlerdetail(item)">
									<view class="item-title">
										<text class="titletext">{{item.name}}</text>
										<view :class="'item-tab' + item.followStatus ">
											{{item.followStatus==0?'待处理':'已处理'}}
										</view>
									</view>
									<view class="item-content">
										<view class="todoList">

											<view class="content-title">
												<view class="htitle">类型</view> <text
													class="content-text">{{item.institutionType}}</text>
											</view>
											<view class="content-title">
												<view class="htitle">发起时间</view> <text
													class="content-text">{{item.checkDate.slice(0,11)}}</text>
											</view>
										</view>
										<view class="todoList">
											<view class="content-title">
												<view class="htitle">发起人</view> <text
													class="content-text">{{item.checkName}}</text>
											</view>
											<view class="content-title">
												<view class="htitle">发起部门</view> <text
													class="content-text">{{item.policeStationName}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="empty" v-else>暂无数据</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		getHomePageCount,
		selectWarnList
	} from "@/api/homePage.js"
	import {
		histMessage,
	} from "@/api/information.js"
	import {
		institutionList
	} from "@/api/unitsList.js"
	import {
		logout
	} from "@/api/login.js"
	import FiguresInfoVue from "./components/figuresInfo.vue";
	import useUserStore from "@/stores/user.js";
	const userStore = useUserStore();
	// console.log("	{{userStore.deptType}}", userStore.userinfo);
	const homePageCounInfo = ref({
		currDate: "",
		institutionCount: 0,
		taskCheckCount: 0,
		taskCount: 0,
		warnDisposalCount: 0,
	})
	// 消息提示引用
	const uToastc = ref(null)
	const pageType = ref(false)
	const list1 = reactive(
		[{
				name: '待处理'
			},
			{
				name: '已处理'
			},
			{
				name: '发起的'
			}
		], )
	const current = ref(1)
	const checkdataList = ref([])
	const warnList = async () => {
		const res = await selectWarnList({
			tempStatus: current.value
		})
		if (res.code == 200) {
			checkdataList.value = res.rows
		}
	}
	/**
	 * @description: 选项卡
	 * @param {*}
	 */
	const onClickItem = async (item) => {
		current.value = item.index + 1;
		warnList()
	}
	/**
	 * @Description:数字看板
	 * @returns
	 */
	const homePageCount = async () => {
		const res = await getHomePageCount()
		if (res.code == 200) {
			homePageCounInfo.value = {
				...res.data
			}
		}
	}
	/**
	 * @Description:目标跳转
	 * @returns
	 */
	const upTo = async (id) => {
		if (userStore.userinfo.deptType == 1) {
			uni.navigateTo({
				url: '/pages/checkReport/checkReport?institutionId=' + id
			});
		} else {
			uToastc.value.show({
				title: '当前仅支持辖区派出所检查上报',
				type: 'warring',
				message: '当前仅支持辖区派出所检查上报',
				position: 'top'
			})
		}
	}
	const toInfo = async (value) => {
		switch (value) {
			case 'task':
				uni.navigateTo({
					url: '/pages/task/task'
				});
				break;
			case 'check':
				uni.navigateTo({
					url: '/pages/checklist/checklist'
				});
				break;
			case 'target':
				uni.navigateTo({
					url: '/pages/targetUnit/targetUnit'
				});
				break;
			case 'danger':
				uni.navigateTo({
					url: '/pages/danger/danger'
				});
				break;
			case 'monit':
				uni.navigateTo({
					url: '/pages/monitoring/monitoring'
				});
				break;

			default:
				break;
		}

	}
	const ToInfomat = async () => {
		uni.navigateTo({
			url: '/pages/information/information'
		});
	}
	const upToDanger = async () => {
		uni.navigateTo({
			url: '/pages/danger/danger'
		});
	}
	//处理详情
	const handlerdetail = (item) => {
		item.pageType = 'danger'
		let params = JSON.stringify(item)

		uni.navigateTo({
			url: `/pages/checkdetail/checkdetail?params=${params}`,
		})
	}
	const popup = ref(null)
	const type = ref()
	const unitName = ref('')
	const institutionListData = ref([])
	const submitDate = ref({
		pageNum: 1, //页数
		pageSize: 5 //每页条数
	})
	const total = ref(0) //数据总条数
	const toggle = async (type) => {
		pageType.value = true
		popup.value.open(type)
		getCheckInfo()
	}
	// }
	const getCheckInfo = async () => {
		const res = await institutionList({
			pageNum: submitDate.value.pageNum,
			pageSize: 100
		}, {
			name: unitName.value
		})
		// console.log("列表数据", res);
		uni.showLoading({
			title: '加载中...'
		});
		if (res.code == 200) {
			uni.hideLoading();
			institutionListData.value = res.rows
			total.value = res.total
		}
	}
	const infoMessagdata = ref([])
	const histInfo = async () => {
		const res = await histMessage()
		if (res.code == 200) {
			infoMessagdata.value = res.rows
		}
	}
	/**
	 * @description: 退出
	 * @param {*}
	 */
	const show = ref(false)
	async function exit() {
		show.value = true
	}
	const confirm = async () => {
		let res = await logout();
		uni.removeStorageSync('fankongApp_key');
		uToastc.value.show({
			title: '登录成功',
			type: 'success',
			message: '登录成功',
			position: 'top'
		})
		setTimeout(() => {
			// 3秒后自动关闭  
			show.value = false;
			uni.reLaunch({
				url: '/pages/login/login'
			});
		}, 1000);
	};
	onMounted(() => {
		homePageCount()
		histInfo()
		warnList()
	})
</script>

<style lang="scss" scoepd>
	.content {
		width: 100%;
		// height: calc(100vh - 100rpx);
		// height: 100vh;
		// background-color: pink;
		background: url('../../static/images/loginTop1.png') no-repeat;
		background-size: 100%;
		background-color: #FAFAFA;

		.header {
			width: 100%;
			height: 134rpx;
			background: url('@/static/images/firstTop.png') no-repeat;
			background-size: 100%;
			position: fixed;
			top: 0;
			box-sizing: border-box;
			z-index: 10;
			display: flex;
			justify-content: space-around;

			.reback {
				width: 20%;
				height: 100rpx;
				margin-left: 26rpx;
				color: #fff;
				line-height: 160rpx;
				font-family: PingFang SC;
			}

			.midltitle {
				width: 60%;
				height: 100rpx;
				text-align: center;
				color: #fff;
				line-height: 160rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;

			}
		}

		.catainer {
			// border: 1px solid red;
			padding-top: 134rpx;

			.catainerTop {
				width: 90%;
				height: 120rpx;
				line-height: 120rpx;
				margin: auto;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;

			}

			.bannerInfo {
				width: 92%;
				height: 29vh;
				margin: auto;
				// border: 1px solid yellow;
				background-color: rgba(255, 255, 255, 0.9);
				box-shadow: 0px 0px 30px 0px rgba(70, 136, 211, 0.3);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.contenArea {
					width: 88%;
					height: 86%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;
					flex-direction: column;

					// border: 1px solid yellow;
					.contenAreaList {
						width: 25%;
						height: 46%;
						// border: 1px solid red;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						.imagede {
							width: 110rpx;
							height: 110rpx;
							// border: 1px solid red;
						}

						.contenAreaName {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
							line-height: 50rpx;
						}
					}
				}
			}

			.information {
				width: 92%;
				height: 20vh;
				margin: auto;
				margin-top: 40rpx;
				// border: 1px solid yellow;
				background-color: #fff;
				box-shadow: 0px 0px 30px 0px rgba(70, 136, 211, 0.3);
				border-radius: 20rpx;


				.inforCatiner {
					width: 90%;
					height: calc(100% - 90rpx);
					margin: auto;
					overflow-y: auto;

					.empty {
						width: 100%;
						line-height: 160rpx;
						text-align: center;
						font-family: PingFang SC;
						font-size: 26rpx;
						color: #333333;
					}

					.infoList {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.infoListitem {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
							line-height: 50px;
						}

						.time {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
						}
					}

					.infoList:first-child {
						border-bottom: 1px solid #EEEEEE;
					}
				}
			}

			.informationTitle {
				width: 94%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: auto;
				background-color: #FAFAFA;

				.left {
					width: 40%;
					height: 100%;
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					line-height: 137rpx;

					.leftImg {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.right {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.todoInfo {
				width: 100%;
				height: 36vh;

				// border: 1px solid red;
				background-color: #FAFAFA;

				.todoInfoItem {
					width: 92%;
					height: 100%;
					margin: auto;
					margin-top: 20rpx;
				}

				.cardTop {
					width: 100%;
					height: 88rpx;

					// overflow-y: auto;
					// overflow: hidden;
				}

				.cardTab {
					width: 100%;
					height: 26vh;
					overflow-y: auto;

					// border: 1px solid yellow;


					.empty {
						width: 100%;
						line-height: 200rpx;
						text-align: center;
						font-family: PingFang SC;
						font-size: 26rpx;
						color: #333333;
					}

					.table-item {
						padding: 20rpx 26rpx;
						font-size: 24rpx;
						border-radius: 20rpx;
						margin-top: 20rpx;
						background-color: #ffffff;
						box-shadow: 0px 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);

						.item-title {
							display: flex;
							justify-content: space-between;
							border-bottom: 1px solid #eeeeee;
							padding-bottom: 20rpx;

							.titletext {
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
							}

							.item-tab0 {
								background-color: #c5defb;
								color: #5e9efd;
								padding: 3rpx 16rpx;
								border-radius: 20rpx;
							}

							.item-tab1 {
								background-color: #c5defb;
								color: #5e9efd;
								padding: 3rpx 16rpx;
								border-radius: 20rpx;
							}

							.item-tab2 {
								background-color: #c5defb;
								color: #5e9efd;
								padding: 3rpx 16rpx;
								border-radius: 20rpx;

							}

						}

						.item-content {
							.todoList {
								width: 100%;
								display: flex;
								justify-content: space-between;
								flex-wrap: wrap;
							}

							.content-title {
								width: 50%;
								display: flex;
								font-family: PingFang SC;
								font-size: 26rpx;
								color: #333333;
								line-height: 50rpx;
								// border: 1px solid red;

								.htitle {
									// width: 120rpx;
									width: 120rpx;
									flex-shrink: 0;
								}
							}

							.content-title:first-child {
								width: 44%;
							}
						}

					}
				}
			}

			:deep(.uni-popup .uni-popup__wrapper) {
				width: 91%;
				border-radius: 20rpx;

			}

			.popup-content {
				width: 100%;
				height: 66vh;
				background-color: #FAFAFA;
				border-radius: 20rpx;

				:deep(.uni-easyinput__content) {
					background-color: transparent !important;
				}

				.top-input {
					width: 92%;
					margin: auto;
					border: 2rpx solid #70a7fd;
					border-radius: 60rpx;
					margin-bottom: 20rpx;

				}

				.popupContentIfo {
					width: 100%;
					height: calc(100% - 190rpx);
					overflow: auto;
				}

				:deep(.u-icon__icon) {
					top: 100rpx !important;
				}

				:deep(.u-empty__text) {
					margin-top: 140rpx;
				}

				.midTitle {
					text-align: center;
					line-height: 86rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}

				.popupCheckList:first-child {
					margin-top: 0rpx;
				}

				.popupCheckList {
					width: 92%;
					height: 15vh;
					margin: auto;
					// border: 1px solid red;
					background-color: rgba(255, 255, 255, 0.9);
					box-shadow: 0px 0px 30px 0px rgba(70, 136, 211, 0.1);
					border-radius: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 20rpx;


					.popupCheckItem {
						width: 93%;
						height: 86%;

						.popupCheckTitle {
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 2rpx solid #EEEEEE;
							height: 60rpx;

							.left {
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 30rpx;
								color: #333333;
							}
						}

						.middle {
							font-family: PingFang SC;
							font-size: 28rpx;
							color: #333333;
							margin-top: 13rpx;
							line-height: 50rpx;
						}

						.bottom {
							display: flex;
							justify-content: space-between;

							.bottomItem {
								// width: 50%;
								font-family: PingFang SC;
								font-size: 28rpx;
								color: #666666;
								line-height: 50rpx;
								// border: 1px solid red;
								// overflow: hidden;
								// text-overflow: ellipsis;
								// white-space: nowrap;

								.bottomType {
									font-family: PingFang SC;
									font-size: 28rpx;
									color: #333333;


								}
							}
						}

						.checktt {
							width: 26rpx;
							height: 30rpx;
						}
					}
				}
			}
		}
	}
</style>